<template>
    <el-drawer :visible.sync="show" size="1000px;" :append-to-body="true">
        <div slot="title">
            <h4 style="margin-bottom: 0;font-weight: bold;"><el-tag style="margin-right: 10px;font-weight: normal;">订单详情</el-tag>{{list.shop.shop_name}}</h4>
        </div>
        <div class="detail_form">
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">订单信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="订单状态">{{list.order.status_name}}</el-form-item>
                    <el-form-item label="探店时间">{{list.order.explore_date}}</el-form-item>
                    <el-form-item label="达人等级">{{list.order.channel_name}}</el-form-item>
                    <el-form-item label="总单量">{{list.order.total_num}}</el-form-item>
                    <el-form-item label="待接单">{{list.order.remaining_num}}</el-form-item>
                    <el-form-item label="已接单">{{list.order.distribution_num}}</el-form-item>
                    <el-form-item label="进行中">{{list.order.pending_num}}</el-form-item>
                    <el-form-item label="完成数">{{list.order.success_num}}</el-form-item>
                    <el-form-item label="取消数">{{list.order.failed_num}}</el-form-item>
                    <el-form-item label="是否到店">{{list.order.offline? '是': '否'}}</el-form-item>
                    <el-form-item label="发单时间">{{list.order.created_at}}</el-form-item>
                    <el-form-item label="探店起期">{{list.order.start_date}}</el-form-item>
                    <el-form-item label="探店止期">{{list.order.end_date}}</el-form-item>
                    <el-form-item v-if="list.order.shop_img" label="商家图片" style="flex: 1 1 100%;">
                        <el-image style="width: 100px; height: 100px;margin-right: 10px;"
                                  :preview-src-list="list.order.shop_img"
                                  v-for="(item,index) in list.order.shop_img"
                                  :key="index"
                                  :src="item"
                                  fit="cover"></el-image>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">店铺信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="店铺名称">{{list.shop.shop_name}}</el-form-item>
                    <el-form-item label="联系人">{{list.shop.contact_man}}</el-form-item>
                    <el-form-item label="联系电话">{{list.shop.contact_phone}}</el-form-item>
                    <el-form-item label="微信昵称">{{list.shop.nickname}}</el-form-item>
                    <el-form-item label="微信手机">{{list.shop.phone}}</el-form-item>
                    <el-form-item label="openid">{{list.shop.openid}}</el-form-item>
                    <el-form-item label="店铺区域">{{list.shop.short_name}}</el-form-item>
                    <el-form-item label="店铺地址">{{list.shop.address}}</el-form-item>
                    <el-form-item label="店铺链接">{{list.shop.link_url}}</el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">工单信息</span>
                </div>
                <el-table :data="list.works" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="work_no" label="工单号">
                        <template slot-scope="scope">
                            <el-button type="text" @click="$refs.workDetail.init(scope.row.work_id)">{{scope.row.work_no}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="receive_time" label="接单时间"></el-table-column>
                    <el-table-column prop="account_name" label="接单账号"></el-table-column>
                    <el-table-column prop="nickname" label="微信昵称"></el-table-column>
                    <el-table-column prop="phone" label="联系电话"></el-table-column>
                    <el-table-column prop="status_name" label="工单状态"></el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="hover" :body-style="{padding:0}">
                <div slot="header">
                    <span style="font-weight: bold;">订单日志</span>
                </div>
                <div style="margin-top: 25px">
                    <el-timeline v-loading="loading">
                        <el-timeline-item
                                v-for="(item, index) in list.log"
                                :key="index"
                                :timestamp="item.created_at">
                            {{item.remark}}
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-card>
        </div>
        <work-detail-dialog ref="workDetail" @refresh="refresh"></work-detail-dialog>
    </el-drawer>
</template>

<script>
    import WorkDetailDialog from "./WorkDetailDialog";
    export default {
        name: "ExploreDetailDialog",
        components:{
            WorkDetailDialog,
        },
        data(){
            return {
                show: false,
                eo_id:'',
                loading:false,
                list:{
                    order:{},
                    shop:{},
                },
            }
        },
        methods:{
            init(eo_id){
                this.eo_id = eo_id;
                this.loadData();
                this.show = true;
            },
            loadData(){
                this.loading = true;
                this.post('/api/laifei/explore/detail',{eo_id:this.eo_id}).then(result=>{
                    if(result.code === 0){
                        this.list = result.data;
                    } else {
                        this.$message.error(result.msg);
                    }
                    this.loading = false;
                })
            },
            refresh(){
                this.loadData();
                this.$emit('refresh');
            }
        }
    }
</script>

<style scoped>

</style>
<style>
    .detail_form{
        padding: 0 10px;
    }
    .detail_form .el-card{
        margin-bottom: 10px;
    }
    .detail_form .el-form-item{
        margin-bottom: 0;
    }
    .detail_form .el-form{
        display: flex;
        flex-wrap: wrap;
    }
    .detail_form .el-form-item{
        flex: 0 0 33%;
    }
    .detail_form .el-card__header{
        padding: 8px 20px;
    }
    .box-card {
        width: 100%;
    }
</style>
